<template>
    <div id="security-center">
      <!-- 导航栏 -->
      <van-nav-bar @click-left="back" class="navbar">
        <template #left>
          <van-icon name="arrow-left" size="18" color="#f7f8fa" />
        </template>
        <template #title>
          <div name="arrow-left" class="title">安全中心</div>
        </template>
      </van-nav-bar>

      <!-- 菜单 -->
      <van-cell-group style="margin-top: 20px">
        <van-cell
          v-for="item in menus"
          :key="item.title"
          :title="item.title"
          center
          is-link
        >
          <template #icon>
            <van-image
              :src="item.icon"
              width="20"
              class="icon"
              lazy-load
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
</template>

<script>
  import store from '@/store'

  export default {
    name: "SecurityCenter",
    data() {
      return {
        menus: [
          {icon: require('@/assets/login_password.png'), title: '登录密码', path: '/security_center'},
          {icon: require('@/assets/business_password.png'), title: '交易密码', path: '/security_center'},
        ],
        store: store,
      };
    },
    methods: {
      back() {
        store.state.mine.showPopup = false;
        this.$router.back(-1);
      },
    },
  }
</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }
  .icon {
    margin-right: 10px;
  }
  .title {
    color: #f7f8fa;
    font-size: 14px;
  }
</style>
